<template>
	<view v-if="dataForm.pk_id" :style="{ '--price': vuex_config.price, '--color': vuex_config.themeColor1 }">
		<view class="prod_img"><sww-swipe :list="swipeList" indicatorDots autoplay @onPlayVideo="onPlayVideo"></sww-swipe></view>
		<view class="flash-times flex-tb">
			<view class="ft_icon iconfont iconfont-e656" v-if="prodState.type != 2"></view>
			<text v-if="currentIndex > -1">【第{{ auction_num[currentIndex].num }}场】限时竞拍</text>
			<view class="ml-auto" v-if="prodState.type == 1">{{ auctionType == 1 ? '准备' : '抢购中...' }}</view>
			<view class="ml-auto" v-else>{{ prodState.msg }}</view>
			<template v-if="prodState.times > 0">
				<view v-if="timeObj.day > 0">：{{ timeObj.day }}天</view>
				<view class="ft-time">{{ timeObj.hours }}</view>
				<view class="ft-time">{{ timeObj.minute }}</view>
				<view class="ft-time">{{ timeObj.second }}</view>
			</template>
		</view>
		<view class="prod_box top_head">
			<view class="prod-title u-font-30 fw-bold">{{ dataForm.name }}</view>
			<view class="title_sen" v-if="vuex_config.subtitle == 1 && dataForm.title">{{ dataForm.title }}</view>
			<view class="prod_price_box">
				<view>
					<text class="u-font-30 price_color u-m-r-5">¥</text>
					<text class="price_color price_num">{{ currentStock <= 0 ? '已抢' : $price(currentPrice) }}</text>
				</view>
				<view class="ori_price">
					<view>（原价{{ $price(prodStockForm.amount) }}元）</view>
					<view class="ori_txt">
						<text>未含服务费</text>
						<!-- <view class="iconfont iconfont-e72c"></view> -->
					</view>
				</view>
				<!-- <view class="ser_tip">服务费：会员收取2%，非会员10%</view> -->
				<!-- <text class="share_ti u-font-26 sww-tp">
					分享赚￥{{(prodStockForm.amount * retCom*0.25).toFixed(2)}}
				</text> -->
			</view>
			<view class="ser_tip">服务费：会员收取2%，非会员10%</view>
		</view>
		<!-- 产品详情 -->
		<block v-if="dataForm.details">
			<view class="prod_box u-m-t-10">
				<u-cell-item :border-bottom="false" :arrow="false"><view class="fw-bold" slot="title" hover-class="none">商品详情</view></u-cell-item>
				<u-parse :html="dataForm.details"></u-parse>
			</view>
		</block>
		<!-- 购买须知 -->
		<block v-if="dataForm.descript">
			<view class="prod_box u-m-t-10">
				<u-cell-item :border-bottom="false" :arrow="false"><view class="fw-bold" slot="title" hover-class="none">价格说明</view></u-cell-item>
				<u-parse :html="dataForm.descript"></u-parse>
			</view>
		</block>
		<!--  底部  -->
		<view class="tip_bot_rel">
			<view class="tip_bot_absolute">
				<view class="tip_cont">提示：若确认订单后半小时内不付款，平台将扣除保证金。拍卖商品恕不退货。</view>
				<view class="i_phx"></view>
			</view>
		</view>
		<sww-goods-action>
			<view class="nav" @click="$linkTo('index')">
				<u-icon name="home" size="36"></u-icon>
				<text>首页</text>
			</view>
			<view class="nav" @click="$customer">
				<button open-type="contact" class="u-reset-button contact_btn"></button>
				<u-icon name="kefu-ermai" size="36"></u-icon>
				<text>客服</text>
			</view>
			<view class="nav" @click="collectChange">
				<u-icon :class="[isFavorite ? 'active' : '']" :name="dataForm.isFavorite == 1 ? 'e732' : 'e733'" size="36" custom-prefix="iconfont"></u-icon>
				<text>收藏</text>
			</view>
			<view :class="['btn', depositInfo.pay_status == 1 && currentStock <= 0 ? 'disabled' : '']" @click="goBuy" v-show="init">
				<view class="deposit_box" v-if="depositInfo.pay_status != 1">
					<view class="deposit">立即抢购</view>
					<view class="bond">(保证金 ￥10)</view>
				</view>
				<view v-else class="btn_name">{{ currentStock > 0 ? '立即抢购' : '已抢，等下轮' }}</view>
			</view>
		</sww-goods-action>
		<sww-login></sww-login>
		<sww-sidebar :scroll-top="scrollTop" :prod-info="{ ...dataForm, prodType: 4 }" share :contact="vuex_config.has_contact"></sww-sidebar>
	</view>
</template>

<script>
import { getProdStatus } from '@/module/product/prodMet';
import { countTime } from '@/utils/moment/index.js';
import { uniModal, uniNavigate, uniToast,uniCall } from '@/utils/uniPromise';
	import {
		sideBarMixin
	} from '@/components/sww-sidebar';
import { pageShare } from '@/mixins/pageShare';
import { isBefore } from '@/utils/moment/index.js';
import { auctionMixin } from '@/pagecomponents/auctionList/auctionMixin.js';
import { payOrder } from '@/mixins/payOrder.js';
export default {
	mixins: [auctionMixin, pageShare, payOrder,sideBarMixin],
	data() {
		return {
			swipeList: [],
			visible: false,
			depositInfo: { is_expire: null }, // 保证金、是否拍卖会员
			isDetail: true,
			paramsObj: {}, //页面栈传值
			getStockTime: null // 查询是否还有库存的请求
		};
	},
	computed: {
		retCom() {
			return this.depositInfo.is_expire ? 0.02 : 0.1;
		},
		isFavorite() {
			return (this.dataForm && this.dataForm.isFavorite == 1);
		}
	},
	onLoad(option) {
		if (option.id) {
			this.initPage(option.id);
		}
	},
	onShow() {
		if (this.dataForm.pk_id) {
			this.clearAllTime();
			this.initPage(this.dataForm.pk_id);
		}
	},
	onHide() {
		this.clearAllTime();
	},
	onUnload() {
		this.clearAllTime();
	},
	onShareAppMessage: function() {
		return this.getShareAppMessage();
	},
	onShareTimeline: function() {
		let obj = this.getShareTimeline();
		return obj;
	},
	methods: {
		initPage(id) {
			this.$loading();
			this.getBondDetail();
			this.$resPost('GetAuctionProductDetailed', { pk_id: id })
				.then(({ data }) => {
					if (data.is_online != 1 || data.status != 1) {
						return Promise.reject();
					}
					if (!data.product_stock || !data.product_stock[0]) {
						this.$hide();
						uniModal({
							title: '活动未开始',
							showCancel: false,
							confirmText: '我知道了'
						}).then(() => {
							this.uniBack();
						});
						return;
					}
					uni.setNavigationBarTitle({
						title: data.name || '详情'
					});
					let swipeList = [];
					if (data.img) {
						data.img.split(',').forEach(item => {
							swipeList.push({
								img: item
							});
						});
					}
					this.swipeList = [].concat(swipeList);
					this.auction_num = data.product_stock[0].auction_num || [];
					this.prodStockForm = {
						...data.product_stock[0],
						platfor_price: data.product_stock[0].platfor_price || 0,
						auctionTime: data.product_stock[0].duration - data.product_stock[0].intend,
						auction_num: []
					};
					this.currentPrice = this.prodStockForm.amount;
					this.initHandle();
					//product_stock分享海报参数
					this.dataForm = {
						...data,
						product_stock: [
							{
								amount: data.product_stock[0].amount
							}
						]
					};

					this.$hide();
				})
				.catch(() => {
					this.$hide();
					uniModal({
						title: '商品已下架',
						showCancel: false,
						confirmText: '我知道了'
					}).then(() => {
						this.uniBack();
					});
				});
		},
		getBondDetail() {
			this.$resPost('GetUsersDepositInfo', { page: 1, page_size: 1 }).then(({ data }) => {
				if (data[0]) {
					this.depositInfo = {
						...data[0],
						is_expire: data[0].expire_date && isBefore(new Date(), data[0].expire_date)
					};
				}
			});
		},
		checkLogin() {
			return this.$login('initPage', this.dataForm.pk_id);
		},
		// 视频播放
		onPlayVideo(url) {
			this.$to(`/package/video/video-play/index?url=${url}`);
		},
		seeServerTip() {
			uni.showToast({
				icon: 'none',
				title: '服务费：会员收取2%，非会员10%'
			});
		},
		goBuy() {
			this.checkLogin().then(() => {
				if (this.depositInfo.pay_status != 1) {
					// 未交押金
					this.$linkTo('/package/product/dutchAuction/agreement');
					return;
				}
				this.buyNow();
			});
		},
		toGetStock() {
			this.$resPost('GetProductAuctionStock', { pk_id: this.auction_num[this.currentIndex].pk_id }).then(({ data }) => {
				if (this.currentStock > 0) {
					// 低于结算价自动变为0，不能买了
					this.currentStock = Number(data.stock || 0);
					this.getStockTime = setTimeout(() => {
						this.toGetStock();
					}, 3000);
				}
			});
		},
		// 收藏切换
		collectChange() {
			this.$u.debounce(
				() => {
					this.checkLogin().then(() => {
						let apiName = this.dataForm.isFavorite == 1 ? 'DeleteUsersFavourite' : 'AddUsersFavourite';
						this.$loading();
						this.$resPost(apiName, {
							type: 4,
							product_id: this.dataForm.pk_id
						})
							.then(() => {
								this.$toast(this.isFavorite ? '已取消收藏' : '收藏成功');
								this.dataForm.isFavorite = this.dataForm.isFavorite == 1 ? '0' : '1';
							})
							.catch(() => {
								this.$hide();
							});
					});
				},
				500,
				true
			);
		},
		buyNow() {
			if (this.prodState.type == 1) {
				if (this.auctionType == 1) {
					this.$hide();
					this.$toast('活动正在准备中...');
					return;
				}
				if (this.currentStock <= 0 || this.prodStockForm.stock_num < 1 || this.currentPrice <= this.prodStockForm.platfor_price) {
					this.$hide();
					uni.showModal({
						title: '商品已抢完,请耐心等待下一场',
						showCancel: false
					});
					return;
				}
				try {
					let opts = {
						createAble: false
					};
					this._submitOrder({}, opts)
						.then(() => {
							this.$loading();
							let num_id = this.auction_num[this.currentIndex].pk_id;
							let price = this.currentPrice.toFixed(2);
							let service_charge = (this.prodStockForm.amount * this.retCom).toFixed(2);
							let obj = {
								product_img: this.dataForm.logo,
								express_num: this.dataForm.express_num, // 多少起免邮费
								express_price: this.dataForm.express_price, // 快递费用
								product_freight: this.dataForm.product_freight || [], // 运费模板
								product_id: this.dataForm.pk_id,
								num: 1,
								price: price,
								product_name: this.dataForm.name,
								standard: this.prodStockForm.name, // 库存名称
								service_charge: service_charge
							};
							let json = [
								{
									fk_pro_id: obj.product_id, // 商品id
									fk_stock_id: this.prodStockForm.pk_id, // 库存id
									num: obj.num,
									fk_num_id: num_id, // 场次id
									name: obj.standard,
									price: obj.price,
									service_charge: obj.service_charge
								}
							];

							let params = {
								remark: '',
								type: 1, // 是否清理用户购物车 1-不清理 2-清理
								postage: 0, // 邮费
								total_amount: Number(obj.price) + Number(obj.service_charge), // 订单总金额
								coupon_id: '0',
								coupon: '0',
								business_appid: this.vuex_business.appid
							};
							if (this.auctionType == 1) {
								this.$hide();
								this.$toast('活动正在准备中...');
								return;
							}
							if (this.currentStock <= 0 || this.prodStockForm.stock_num < 1 || this.currentPrice <= this.prodStockForm.platfor_price) {
								this.$hide();
								uni.showModal({
									title: '商品已抢完,请耐心等待下一场',
									showCancel: false
								});
								return;
							}
							this.$resPost('AddOrderAuctionProduct', params, JSON.stringify(json))
								.then(res1 => {
									let paramsObj = {
										type: 'prod',
										list: [
											{
												...obj
											}
										]
									};

									this.paramsObj = paramsObj;
									// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
									this.$hide();
									this.$to(`/package/product/dutchAuction/order?order_id=${res1.data.pk_id}&order_no=${res1.data.order_no}`);
									// #endif

									// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
									uniNavigate(`/package/product/dutchAuction/order?order_id=${res1.data.pk_id}&order_no=${res1.data.order_no}`).then(res => {
										this.$hide();
										res.eventChannel.emit('acceptParams', paramsObj);
									});
									// #endif
								})
								.catch(() => {});
						})
						.catch(() => {
							this.$hide();
						});
				} catch (e) {
					this.$hide();
				}
			} else if (this.prodState.type === 0) {
				this.$toast('活动未开始');
			} else if (this.prodState.type == 2) {
				this.$toast('活动已结束');
			}
		},
		clearAllTime() {
			if (this.timer) {
				clearTimeout(this.timer);
			}
			if (this.timer2) {
				clearTimeout(this.timer2);
			}
			if (this.getStockTime) {
				clearTimeout(this.getStockTime);
			}
		},
		// 客服
		$customer() {
			// #ifdef H5
			let phone = this.vuex_business.custom_tel;
			uniCall(phone);
			// #endif
		},
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.prod_img {
	position: relative;
}
/*限时抢购*/
.flash-times {
	width: 100%;
	height: 80rpx;
	background-color: #ff8a2d;
	overflow: hidden;
	position: relative;
	padding: 0 30rpx;
	color: #fff;
	font-size: 28rpx;
	&::before {
		position: absolute;
		content: '';
		width: 353rpx;
		height: 240rpx;
		left: -113rpx;
		top: -80rpx;
		transform: rotate(-45deg);
		background-color: rgba(255, 255, 255, 0.1);
	}
	.ft_icon {
		font-size: 32rpx;
		margin-right: 14rpx;
	}

	.ft-time {
		width: 46rpx;
		line-height: 34rpx;
		color: #ff8a2d;
		font-weight: 400;
		margin-left: 24rpx;
		background-color: #fff;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
}

.prod_box {
	overflow: hidden;
	width: 100%;
	padding: 0 20rpx 10rpx;
	background-color: #ffffff;
	&.top_head {
		padding-right: 10rpx;
	}
	.prod-title {
		width: 100%;
		padding-top: 20rpx;
	}
	.title_sen {
		margin-top: 10rpx;
		color: #999;
	}
	.prod_price_box {
		padding: 10rpx 0 10rpx;
		display: flex;
		align-items: center;
		.price_color {
			color: var(--price);
		}
		.price_num {
			font-size: 50rpx;
		}
		.ori_price {
			color: #999;
			font-size: 24rpx;
			margin-left: 8rpx;
			text-align: center;
		}
		.ori_txt {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 4rpx;
			.iconfont {
				position: relative;
				top: 1px;
				color: #6440b3;
				margin-left: 2rpx;
			}
		}
		.share_ti {
			align-self: flex-end;
			font-size: 24rpx;
			// flex:1;
			// overflow: hidden;
			// text-align: right;
		}
		.ser_tip {
			font-size: 28rpx;
			padding-bottom: 10rpx;
		}
	}

	/deep/ .u-cell {
		padding: 0;
		height: 88rpx;
	}
}
// 底部栏
/* 左右滚动跑马灯动画*/
@keyframes marqueeTransform {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
.tip_bot_rel {
	height: 40rpx;
	.tip_bot_absolute {
		background-color: #faad99;
		bottom: 0;
		left: 0;
		position: fixed;
		width: 100%;
		z-index: 100;
		padding: 0 10rpx 100rpx;
		.i_phx{
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
		.tip_cont {
			white-space: nowrap;
			animation: marqueeTransform 12s linear infinite;
			color: #775045;
			height: 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
		}
	}
}
.nav {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	.contact_btn {
		position: absolute;
		top: 0;
		left: 24rpx;
		width: 70rpx;
		height: 70rpx;
	}
	.active {
		color: var(--color);
	}
}
.btn {
	flex: 4;
	background-color: var(--color);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	// border-top-left-radius: 56rpx;
	// border-bottom-left-radius: 56rpx;
	&.disabled {
		background-color: #ede0e0;
		color: #fff;
	}
	.btn_name {
		font-weight: bold;
		font-size: 36rpx;
	}
	.deposit_box {
		text-align: center;
		.deposit {
			font-size: 28rpx;
		}
		.bond {
			font-size: 26rpx;
		}
	}
}
</style>
